<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Input - Attributes</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Input - Attributes</ion-title>
          <ion-buttons slot="primary">
            <ion-button>
              <ion-icon slot="icon-only" name="menu"></ion-icon>
            </ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>

      <ion-content>
        <ion-list>
          <ion-label id="itemless">My Label</ion-label>
          <ion-input aria-labelledby="itemless"></ion-input>

          <ion-item>
            <ion-label position="stacked">Number</ion-label>
            <ion-input
              id="input1"
              type="number"
              placeholder="Placeholder"
              value="1234"
              name="holaa"
              min="0"
              max="10000"
              step="2"
              autocomplete="on"
              autocorrect="on"
              autocapitalize="on"
              spellcheck="true"
              maxlength="4"
              disabled
              readonly
            ></ion-input>
          </ion-item>

          <ion-item id="custom">
            <ion-label position="stacked">Text</ion-label>
            <ion-input id="input2" type="text" placeholder="my placeholder" value="test"></ion-input>
          </ion-item>

          <ion-item>
            <ion-label id="myLabel" stacked>Default</ion-label>
            <ion-input id="input3" value="inputs"></ion-input>
          </ion-item>

          <ion-item>
            <ion-input id="input4" placeholder="No Label" aria-label="input4"></ion-input>
          </ion-item>

          <ion-list>
            <ion-item>
              Number Test&nbsp;
              <span id="numberInputResult"></span>
            </ion-item>
            <ion-item>
              Text Test&nbsp;
              <span id="textInputResult"></span>
            </ion-item>
            <ion-item>
              Default Test&nbsp;
              <span id="defaultInputResult"></span>
            </ion-item>
            <ion-item>
              No Label Test&nbsp;
              <span id="noLabelInputResult"></span>
            </ion-item>
          </ion-list>
        </ion-list>
      </ion-content>

      <script>
        var numberInput = checkInput('input1');
        updateResult(numberInput, 'numberInputResult');

        var textInput = checkInput('input2');
        updateResult(textInput, 'textInputResult');

        var defaultInput = checkInput('input3');
        updateResult(defaultInput, 'defaultInputResult');

        var noLabelInput = checkInput('input4');
        updateResult(noLabelInput, 'noLabelInputResult');

        // Update results of input
        function updateResult(result, resultId) {
          var resultEl = document.getElementById(resultId);
          resultEl.innerHTML = result ? 'passed' : 'FAILED';

          var itemEl = resultEl.closest('ion-item');
          itemEl.color = result ? 'secondary' : 'danger';
        }

        function checkInput(id) {
          var el = document.getElementById(id);
          var inputEl = el.querySelector('input');

          if (id === 'input1') {
            return testAttributes(el, inputEl, {
              id: 'input1',
              type: 'number',
              placeholder: 'Placeholder',
              name: 'holaa',
              min: '0',
              max: '10000',
              step: '2',
              autocomplete: 'on',
              autocorrect: 'on',
              autocapitalize: 'on',
              spellcheck: 'true',
              maxLength: '4',
              'aria-labelledby': 'lbl-0',
              readonly: true,
              disabled: true,
            });
          } else if (id === 'input2') {
            return testAttributes(el, inputEl, {
              id: 'input2',
              type: 'text',
              placeholder: 'my placeholder',
              value: 'test',
              readonly: undefined,
              disabled: undefined,
            });
          } else if (id === 'input3') {
            return testAttributes(el, inputEl, {
              id: 'input3',
              type: undefined,
              value: 'inputs',
              readonly: undefined,
              disabled: undefined,
            });
          } else if (id === 'input4') {
            return testAttributes(el, inputEl, {
              id: 'input4',
              type: undefined,
              readonly: undefined,
              disabled: undefined,
              'aria-label': 'input4',
            });
          }
          return false;
        }

        function testAttributes(el, inputEl, attributes) {
          for (let attr in attributes) {
            const expected = attributes[attr];
            const value = el[attr];

            if (expected === null) {
              if (el.hasAttribute(attr) || value !== '') {
                console.error(`Element should NOT have "${attr}"`);
                return false;
              }
            } else {
              if (expected !== value && expected !== el.getAttribute(attr)) {
                console.error(`Value "${attr}" does not match: ${expected} != ${value}`);
                return false;
              }
            }
          }
          return true;
        }
      </script>
    </ion-app>
  </body>
</html>
